<?php
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     base_default
 * @copyright   Copyright (c) 2010 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */

/**
 * Product additional attributes template
 *
 * @see Mage_Catalog_Block_Product_View_Attributes
 */
?>
<?php
    $_helper = $this->helper('catalog/output');
    $_product = $this->getProduct()
?>
<?php if($_additional = $this->getAdditionalData()): ?>
    <h2><?php echo $this->__('Additional Information') ?></h2>
    <table class="data-table" id="product-attribute-specs-table">
        <col width="25%" />
        <col />
        <tbody>
        <?php foreach ($_additional as $_data): ?>
            <tr>
                <th class="label"><?php echo $this->htmlEscape($this->__($_data['label'])) ?></th>
                <td class="data"><?php echo $_helper->productAttribute($_product, $_data['value'], $_data['code']) ?></td>
            </tr>
        <?php endforeach; ?>
        </tbody>
    </table>
    <br />
    <div class="std tech-info-tip-box">
        <p class="tech-info-tip"><?php echo $this->__('The technical information above is strictly in accordance with <a href="#">National(China) Cultured Pearl Grading System <strong>+</strong></a>.'/*, Mage::getBaseUrl().'things-to-know#answer1'*/) ?></p>
        <div style="display: none">
            <dl>
                <dt><h4><?php echo $this->__('1. Pearl\'s Luster Grading') ?></h4></dt>
                <dd><p class="tech-info-tip-eg-img" style="background-position: 0px 0px;">&nbsp;</p><p><?php echo $this->__('<strong>A: pretty good</strong><br />The luster of good quality pearl is pretty sharp,bright,and mirror-like reflection.') ?></p></dd>
                <dd><p class="tech-info-tip-eg-img" style="background-position: -80px 0px;">&nbsp;</p><p><?php echo $this->__('<strong>B: Good</strong><br />The luster is sharp and bright ,the reflection is clear.') ?></p></dd>
                <dd><p class="tech-info-tip-eg-img" style="background-position: -160px 0px;">&nbsp;</p><p><?php echo $this->__('<strong>C: Middling</strong><br />The luster is bright, you can see the reflection of object on the surface.') ?></p></dd>
            </dl>
            <dl>
                <dt><h4><?php echo $this->__('2. Pearl\'s Shape Grading') ?></h4></dt>
                <dd><p class="tech-info-tip-eg-img" style="background-position: 0px -80px;">&nbsp;</p><p><?php echo $this->__('<strong>A1: Perfect round</strong><br />The disparity between longest diamiter and shortest diamiter ≤%1.') ?></p></dd>
                <dd><p class="tech-info-tip-eg-img" style="background-position: -80px -80px;">&nbsp;</p><p><?php echo $this->__('<strong>A2: Round</strong><br />The disparity between longest diamiter and shortest diamiter ≤%5.') ?></p></dd>
                <dd><p class="tech-info-tip-eg-img" style="background-position: -160px -80px;">&nbsp;</p><p><?php echo $this->__('<strong>A3: Almost good</strong><br />The disparity between longest diamiter and shortest diamiter ≤%10.') ?></p></dd>
            </dl>
            <dl>
                <dt><h4><?php echo $this->__('3. Pearl\'s Surface Grading') ?></h4></dt>
                <dd><p class="tech-info-tip-eg-img" style="background-position: 0px -160px;">&nbsp;</p><p><?php echo $this->__('<strong>A: Flawless</strong><br />It looks very smooth ,and you hardly find out flaws on the surface.') ?></p></dd>
                <dd><p class="tech-info-tip-eg-img" style="background-position: -80px -160px;">&nbsp;</p><p><?php echo $this->__('<strong>B: Micro flaw</strong><br />Although there are a few flaws like spicules, it\'s hard to find out them on the surface.') ?></p></dd>
                <dd><p class="tech-info-tip-eg-img" style="background-position: -160px -160px;">&nbsp;</p><p><?php echo $this->__('<strong>C: Small flaw</strong><br />It is easy to find out some small flaws on the surface.') ?></p></dd>
            </dl>
        </div>
    </div>
    <script type="text/javascript">decorateTable('product-attribute-specs-table')</script>
    <script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery('div.tech-info-tip-box p.tech-info-tip a').click(function() {
            var _self = jQuery(this).parent('p');
            _self.siblings('div').slideToggle('slow', function() {
                if(jQuery(this).css('display') == 'none') {
                    _self.find('strong').html('+');
                } else {
                    _self.find('strong').html('-');
                }
            });
            return false;
        });
    });
    //<![CDATA[
        /*
    Varien.SlideUp = Class.create();
    Varien.SlideUp.prototype = {
      initialize: function(selector) {
        var self=this;
        $$(selector).each(this.initSlideUp.bind(this));
      },

      initSlideUp: function(el) {
          el.select('a').each(function(a) {
            a.href = "javascript: void(0)";
          });
          if ($(el.parentNode).hasClassName('active')) {
            this.showContent(el);
          }
          el.observe('click', this.showContent.bind(this, el));
      },

      showContent: function(a) {
        var div = $(a.parentNode);
          if ( ! div.hasClassName('active')) {
            div.select('div').each(function(el){
                el.show();
            });
            div.addClassName('active');
          } else {
            div.select('div').each(function(el){
                el.hide();
            });
            div.removeClassName('active');
          }
        }
    }
    new Varien.SlideUp('.tech-info-tip');
         */
    //]]>
    </script>
<?php endif;?>
